<link rel="stylesheet" href="/assets/admin/css/reset.css">
<link rel="stylesheet" href="/assets/admin/css/formquery.css">
<style>
    .list-inline {
        width: 100%;
        padding: 20px;
        box-sizing: border-box;
    }

    .panel-body {
        width: 100%;
        padding: 20px 34px;
        box-sizing: border-box;
    }

    .panel-body .nav-bar .nav-items li {
        padding: 10px 0;
        box-sizing: border-box;
    }

    .panel-body .nav-bar .nav-items li span {
        display: inline-block;
        padding: 5px 0;
        text-align: center;
        box-sizing: border-box;
        cursor: pointer;
        width: 100px;
    }

    .datetimepicker {
        border: 1px solid #eee;
        text-indent: 10px;
        border-radius: 10px;
    }

    .num {
        vertical-align: 10px;
    }
    /* =============== */

    #crumbs .one li a select {
        background-color: #18bc9c;
        margin-top: -5px;
    }

    #crumbs .one li a select option {
        color: #fff;
        background-color: turquoise;
        font-size: 16px;
        padding: 10px 0;
        text-align: center;
        height: 30px;
        line-height: 30px;
    }

    .jingkou {
        border: 1px solid #eee;
        text-indent: 10px;
        border-radius: 10px;
    }

    .shuJuNum {
        border: 1px solid #eee;
        width: 50px;
        text-align: center;
    }
</style>

<div class="panel panel-default panel-intro">
    <!-- <div class="panel-heading">
        这个查询，更适用用原生bootstrap-table实现!
    </div> -->
    <div id="crumbs">
        <div class="clearfix">
            <div class="one fl">
                <ul class="clearfix">
                    <li class="clearfix first">
                        <a href="#">
                            <select class="xiala">
                                <option value="">下拉菜单工区级</option>
                                <option value="">下拉菜单工区级</option>
                                <option value="">下拉菜单工区级</option>
                                <option value="">下拉菜单工区级</option>
                                <option value="">下拉菜单工区级</option>
                                <option value="">下拉菜单工区级</option>
                                <option value="">下拉菜单工区级</option>
                                <option value="">下拉菜单工区级</option>
                            </select>
                        </a>
                    </li>
                    <li class="clearfix second">
                        <a href="#"> <select class="xiala">
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                    </select></a>
                    </li>
                    <li class="clearfix four">
                        <a href="#"> <select class="xiala">
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                        <option value="">下拉菜单工区级</option>
                    </select></a>
                    </li>
                </ul>
            </div>
            <div class="two fl">
                <span>按钮页面跳转</span>
            </div>
            <div class="three fl">
                <input type="search" placeholder="输入框">
            </div>

        </div>
    </div>
    <!-- ================== -->
    <div class="panel-body">
        <div class="">
            <form id="fmq_form" method="post" action="{:url('news/home/formquery')}">
                <ul class="list-inline">
                    <li><label>井口：</label> <input id="c-wellhead" data-rue="required" data-source="news/home/slt_wellhead" name="row[wellhead]" type="text" class="jingkou selectpage" value="" /></li>
                    <li><label>开始时间：</label></label><input type="text" class="datetimepicker" name="row[start_time]" /></li>
                    <li><label>数据数量：</label><input type="text" name="row[count]" width="3px" class="shuJuNum" /></li>
                    <li>
                        <label>统计间隔</label>
                        <select name="row[per_time]" class="xiala">
                        <option value="0.5">半小时</option>
                        <option value="1">1小时</option>
                        <option value="2">2小时</option>
                        <option value="3">3小时</option>
                    </select>
                    </li>
                    <li>
                        <input type="submit" class="btn btn-success" value="查询">
                    </li>
                </ul>
            </form>
        </div>
        <div class="nav-bar">
            <ul class="nav-items">
                <li id="navClickBtn">
                    <span>序号</span>
                    <span>{:__('datetime')}</span>
                    <span>{:__('address')}</span>
                    <span>{:__('instan_rate')}</span>
                    <span>{:__('total_rate_hour')}</span>
                    <span>{:__('total_rate_day')}</span>
                    <span>{:__('total_rate_month')}</span>
                    <span>{:__('tatal_rate_year')}</span>
                </li>
                <div id="slide">
                    {volist name='rate' id='ra' empty='暂时没有数据'}
                    <li>
                        <span class="num">{$ra.id}</span>
                        <span>{$ra.datetime}</span>
                        <span>{$ra.address}</span>
                        <span>{$ra.instan_rate}</span>
                        <span>{$ra.total_rate_hour}</span>
                        <span>{$ra.total_rate_day}</span>
                        <span>{$ra.total_rate_month}</span>
                        <span>{$ra.total_rate_year}</span>
                    </li>

                    {/volist}
                </div>
            </ul>
        </div>

    </div>
</div>